<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 win10 loading</title>
<style>
/*css reset */
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 1000px;
    margin: 200px auto;
}

.windows8 {
    position: relative;
    width: 44px;
    height:44px;
    margin:auto;
}

.windows8 .wBall {
    position: absolute;
    width: 42px;
    height: 42px;
    opacity: 0;
    transform: rotate(225deg);
        -o-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
    animation: orbit 3.6325s infinite;
        -o-animation: orbit 3.6325s infinite;
        -ms-animation: orbit 3.6325s infinite;
        -webkit-animation: orbit 3.6325s infinite;
        -moz-animation: orbit 3.6325s infinite;
}

.windows8 .wBall .wInnerBall{
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgb(0,0,0);
    left:0px;
    top:0px;
    border-radius: 5px;
}

.windows8 #wBall_1 {
    animation-delay: 0.796s;
        -o-animation-delay: 0.796s;
        -ms-animation-delay: 0.796s;
        -webkit-animation-delay: 0.796s;
        -moz-animation-delay: 0.796s;
}

.windows8 #wBall_2 {
    animation-delay: 0.153s;
        -o-animation-delay: 0.153s;
        -ms-animation-delay: 0.153s;
        -webkit-animation-delay: 0.153s;
        -moz-animation-delay: 0.153s;
}

.windows8 #wBall_3 {
    animation-delay: 0.3165s;
        -o-animation-delay: 0.3165s;
        -ms-animation-delay: 0.3165s;
        -webkit-animation-delay: 0.3165s;
        -moz-animation-delay: 0.3165s;
}

.windows8 #wBall_4 {
    animation-delay: 0.4695s;
        -o-animation-delay: 0.4695s;
        -ms-animation-delay: 0.4695s;
        -webkit-animation-delay: 0.4695s;
        -moz-animation-delay: 0.4695s;
}

.windows8 #wBall_5 {
    animation-delay: 0.633s;
        -o-animation-delay: 0.633s;
        -ms-animation-delay: 0.633s;
        -webkit-animation-delay: 0.633s;
        -moz-animation-delay: 0.633s;
}



@keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin:0%;
    }

    30% {
        opacity: 1;
        transform:rotate(410deg);
        animation-timing-function: ease-in-out;
        origin:7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin:30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin:39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin:70%;
    }

    76% {
    opacity: 0;
        transform:rotate(900deg);
    }

    100% {
    opacity: 0;
        transform: rotate(900deg);
    }
}

@-o-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -o-transform: rotate(300deg);
        -o-animation-timing-function: linear;
        -o-origin:0%;
    }

    30% {
        opacity: 1;
        -o-transform:rotate(410deg);
        -o-animation-timing-function: ease-in-out;
        -o-origin:7%;
    }

    39% {
        opacity: 1;
        -o-transform: rotate(645deg);
        -o-animation-timing-function: linear;
        -o-origin:30%;
    }

    70% {
        opacity: 1;
        -o-transform: rotate(770deg);
        -o-animation-timing-function: ease-out;
        -o-origin:39%;
    }

    75% {
        opacity: 1;
        -o-transform: rotate(900deg);
        -o-animation-timing-function: ease-out;
        -o-origin:70%;
    }

    76% {
    opacity: 0;
        -o-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
        -o-transform: rotate(900deg);
    }
}

@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;
        -ms-origin:0%;
    }

    30% {
        opacity: 1;
        -ms-transform:rotate(410deg);
        -ms-animation-timing-function: ease-in-out;
        -ms-origin:7%;
    }

    39% {
        opacity: 1;
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;
        -ms-origin:30%;
    }

    70% {
        opacity: 1;
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:39%;
    }

    75% {
        opacity: 1;
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:70%;
    }

    76% {
    opacity: 0;
        -ms-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
        -ms-transform: rotate(900deg);
    }
}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:0%;
    }

    30% {
        opacity: 1;
        -webkit-transform:rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin:7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:70%;
    }

    76% {
    opacity: 0;
        -webkit-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
        -webkit-transform: rotate(900deg);
    }
}

@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;
        -moz-origin:0%;
    }

    30% {
        opacity: 1;
        -moz-transform:rotate(410deg);
        -moz-animation-timing-function: ease-in-out;
        -moz-origin:7%;
    }

    39% {
        opacity: 1;
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;
        -moz-origin:30%;
    }

    70% {
        opacity: 1;
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:39%;
    }

    75% {
        opacity: 1;
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:70%;
    }

    76% {
    opacity: 0;
        -moz-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
        -moz-transform: rotate(900deg);
    }
}
</style>
</head>

<body>
    <div class="wrapper">
        <div class="windows8">
        <div class="wBall" id="wBall_1">
            <div class="wInnerBall"></div>
        </div>
        <div class="wBall" id="wBall_2">
            <div class="wInnerBall"></div>
        </div>
        <div class="wBall" id="wBall_3">
            <div class="wInnerBall"></div>
        </div>
        <div class="wBall" id="wBall_4">
            <div class="wInnerBall"></div>
        </div>
        <div class="wBall" id="wBall_5">
            <div class="wInnerBall"></div>
        </div>
    </div>
</div>  
</body>
</html>